<%@ include file="includes.jsp" %>
<%--mobilityslider--%>
<link href="/js/plugins/mobilityslider/css/mobilityslider.css" rel="stylesheet" type="text/css"/>
<script src="/js/plugins/mobilityslider/js/jquery.js" type="text/javascript"></script>
<script src="/js/plugins/mobilityslider/js/mobilyslider.js" type="text/javascript"></script>
<script src="/js/plugins/mobilityslider/js/init.js" type="text/javascript"></script>

<link rel="stylesheet" href="/js/plugins/shadowbox/shadowbox.css" type="text/css"/>
<%--<script type="text/javascript" src="/js/plugins/shadowbox/jquery.js"></script>--%>
<script type="text/javascript" src="/js/plugins/shadowbox/shadowbox.js"></script>
<script type="text/javascript" src="/js/plugins/shadowbox/init.js"></script>

<style type="text/css">
    .itemText {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 20px;
        height: 20px;
        background-color: transparent;
        z-index: 100;
        font-weight: bold;
        font-style: italic;
        font-size: 2em;
        color: #000;
        text-shadow: #FFF 3px 3px 2px;
    }

    #photos {
        display: none;
    }

    #photosTitle {
        text-align: left;
        display: none;
    }

</style>

<div id="window">

    <div id="mobilitySliderContent">

        <div class="slider">
            <div class="sliderContent">
            </div>
        </div>

    </div>

</div>


<script type="text/javascript">

$(document).ready(function() {

//    $.fn.log = function (msg) {
//        window.console.log("%s: %o", msg, this);
//        return this;
//    };

    Shadowbox.init({
        overlayOpacity: 0.8
    });

    var picasaUserId = "101263606183133134843";
    var bigThumbSize = 512;
    var littleThumbSize = 104;
    var imgmax = 1280;
    var _photosOpened = false;

    function getPhotosOpened() {
        return _photosOpened;
    }

    function setPhotosOpened(bool) {
        _photosOpened = bool;
        if (bool) {
            pauseSlider();
        } else {
            autoplaySlider();
        }
    }

    function getAlbumsURI(user, bigThumbSize, littleThumbSize) {
        return "http://picasaweb.google.com/data/feed/api/"
                + "user/" + user
                + "?alt=" + "json"
                + "&access=visible"
                + "&v=2"
                + "&kind=" + "album"
                + "&hl=" + "en_US"
                + "&fields=" + "entry(media:group,id,gphoto:id,gphoto:numphotos)"
                + "&thumbsize=" + bigThumbSize + ',' + littleThumbSize
                + "&callback=?";
    }

    function getAlbumPhotosURI(picasaUserId, albumId, littleThumbSize) {
        return "http://picasaweb.google.com/data/feed/api/"
                + "user/" + picasaUserId
                + "/albumid/" + albumId
                + "?alt=" + "json"
                + "&access=visible"
                + "&v=2"
                + "&kind=" + "photo"
                + "&hl=" + "en_US"
                + "&fields=" + "entry(id,content,media:group)"
                + "&thumbsize=" + littleThumbSize
                + "&imgmax=" + imgmax
                + "&callback=?";
    }

    function pauseSlider() {
        $('.slider').data('slider').pause();
    }

    function autoplaySlider() {
        $('.slider').data('slider').autoplay();
    }

    function appendPhotoFrame(targetElem) {
        var frame = $('<span></span>');
        $(frame).css({
            width: '104px',
            height: '104px',
            display: 'inline-block'
        });
        $(targetElem).append(frame);
    }

    function closePhotos(photosTitleElem, photosElem) {
        photosElem.slideUp(1000);
        photosTitleElem.slideUp(1000);
        setPhotosOpened(false);
    }

    function showPhotos(albumId, photosNumber, title) {
        setPhotosOpened(true);

        var photosTitleElem = $('#photosTitle');
        var photosElem = $('#photos');

        photosTitleElem.empty();
        var photosCloseButton = $('<a href="#" style="float: right;bottom: 5px;"><img src="../../images/close.png"></a>');
        photosCloseButton.click(function(e) {
            e.preventDefault();
            closePhotos(photosTitleElem, photosElem);
        });
        photosTitleElem.html(title);
        photosTitleElem.append(photosCloseButton);

        photosElem.empty();
        photosElem.css({
            borderTop: '1px solid #FFF'
        });

        for (var i = 0; i < photosNumber; i++) {
            appendPhotoFrame(photosElem);
        }

        photosElem.slideDown(1000);
        photosTitleElem.slideDown(1000);

        var photoFrames = photosElem.find('span');

        var json_Photo_URI = getAlbumPhotosURI(picasaUserId, albumId, littleThumbSize);
        $.ajax({
            type: 'GET',
            cache: false,
            url: json_Photo_URI,
            success : function(data) {
                $.each(data.feed.entry, function(entryIndex, item) {
                    var contentUrl = item.media$group.media$content[0].url;
                    var caption = item.media$group.media$description.$t;
                    var anchor = $('<a href=""></a>');
                    anchor.attr('href', contentUrl);
                    anchor.attr('title', caption);
                    anchor.addClass('galleryA');
                    $(photoFrames[entryIndex]).append(anchor);
                    //Thumbnail URL
                    $.each(item.media$group.media$thumbnail, function(thumbnailIndex, item) {
                        var photo_Thumb_URL = item.url;
                        var img = new Image();
                        $(img).load(
                                function () {
                                    $(this).hide();
//                                    $(photoFrames[entryIndex]).append(this);
                                    anchor.append(this);
                                    $(this).fadeIn(1000);
                                }).error(
                                function () {
                                    alert('Image ' + photo_Thumb_URL + 'could not be loaded!');
                                }).attr({'src': photo_Thumb_URL}).css({'display': 'inline'});

                    });
                });

                Shadowbox.clearCache();

                Shadowbox.setup("a.galleryA", {
                    gallery: "mustang",
                    continuous: true,
                    counterType: "skip"
                });

                $('html, body').animate({scrollTop: $('body').height()}, 3000);
            },
            dataType: 'json',
            async: false

        });

    }

    function createAlbumMenuItem(src, albumId, photosNumber, title, entryIndex) {
        var menuItem = $('<span></span>');
        var img = $('<img>');
        menuItem.append(img);
        img.attr('src', src);

        menuItem.click(function(e) {
            if (getPhotosOpened()) {
                var photosTitleElem = $('#photosTitle');
                var photosElem = $('#photos');
                photosTitleElem.slideUp(1000);
                photosElem.slideUp(1000, function() {
                    showPhotos(albumId, photosNumber, title);
                });
//                setPhotosOpened(false);
            } else {
                showPhotos(albumId, photosNumber, title);
            }
        });

        menuItem.mouseenter(function(e) {
            pauseSlider();
            var a = $('.sliderBullets a');
            $(a.get(entryIndex)).trigger('click');
        });

        menuItem.mouseleave(function(e) {
            if (!getPhotosOpened()) {
                autoplaySlider();
            }
        });

        return menuItem;
    }

    function createSliderItem(src, albumId, photosNumber, title) {
        var item = $('<div></div>');
        item.addClass('item');

        var anchor = $('<a href="#"></a>');
        anchor.css({
            position: 'relative'
        });
        anchor.click(function(e) {
            e.preventDefault();
            showPhotos(albumId, photosNumber, title);
        });

        var hoverText = $('<div></div>');
        hoverText.addClass('itemText');
        hoverText.html(title);

        var img = $('<img/>');
        img.attr('height', 512);
        img.attr('src', src);
        img.attr('alt', '');

        anchor.append(img);
        anchor.append(hoverText);
        item.append(anchor);

        return item;
    }

    var request = $.ajax({
        type: 'GET',
        cache: false,
        url: getAlbumsURI(picasaUserId, bigThumbSize, littleThumbSize),
        success : function(data, textStatus, jqXHR) {

            var sliderContent = $('div.sliderContent');

            $.each(data.feed.entry, function(entryIndex, item) {

                var album_ID = item.gphoto$id.$t;
                var album_photos_number = item.gphoto$numphotos.$t;
                var album_Title = item.media$group.media$title.$t;

                $.each(item.media$group.media$thumbnail, function(thumbnailIndex, item) {
                    var album_thumb_URL = item.url;
                    if (item.height == 512) {
                        sliderContent.append(createSliderItem(album_thumb_URL, album_ID, album_photos_number, album_Title));
                    }

                    if (item.height == 104) {
                        $('#albums').append(createAlbumMenuItem(album_thumb_URL, album_ID, album_photos_number, album_Title, entryIndex));
                    }
                });
            });

            var slider = $('.slider').mobilyslider({
                content: '.sliderContent',
                children: 'div',
                autoplay:true,
                autoplaySpeed:3000,
                pauseOnHover:true,
                transition: 'fade',
                animationStart: function() {
                },
                animationComplete: function() {
                }
            });

        },
        error : function(jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        },
        dataType: 'json',
        async: true

    });
});


</script>

<div id="albums"></div>
<br>
<br>

<div id="photosTitle"></div>
<div id="photos"></div>

